
<template>
  <div class="announcement-summary">
    <el-tabs v-model="activeTab" type="card">
      <el-tab-pane label="通告列表" name="announcements">
        <el-table :data="announcements" style="width: 100%">
          <el-table-column prop="id" label="ID" width="180"></el-table-column>
          <el-table-column prop="title" label="标题" width="180"></el-table-column>
          <el-table-column prop="date" label="日期"></el-table-column>
          <el-table-column prop="type" label="类型"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="会议信息" name="meetings">
        <el-card shadow="always">
          <h2>近期会议</h2>
          <ul>
            <li v-for="meeting in meetings" :key="meeting.id">
              {{ meeting.title }} - {{ meeting.date }}
            </li>
          </ul>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'notifications',
      notifications: [
        { id: 1, title: '关于加强交通安全的通知', date: '2024-12-01' },
        { id: 2, title: '冬季行车安全提示', date: '2024-11-25' }
      ],
      meetings: [
        { id: 1, title: '年度工作总结会议', date: '2024-12-15' },
        { id: 2, title: '技术交流研讨会', date: '2024-12-20' },
        { id: 3, title: '聊天', date: '2024-12-14' },
        { id: 4, title: '哈哈哈', date: '2024-12-19' }
      ],
      announcements: [
        { id: 1, title: '关于加强交通安全的通知', date: '2024-12-01', type: '通知' },
        { id: 2, title: '冬季行车安全提示', date: '2024-11-25', type: '提示' },
        { id: 3, title: '年度工作总结会议', date: '2024-12-15', type: '会议' },
        { id: 4, title: '技术交流研讨会', date: '2024-12-20', type: '会议' }
      ]
    };
  }
};
</script>

<style scoped>
.announcement-summary {
  padding: 20px;
}

.el-card {
  margin-bottom: 20px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
}
</style>